<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="ant-pro-components-tag-select">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="列名称">
                <a-input v-model="queryParam.name" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="模糊搜索">
                <a-select v-model="queryParam.status" placeholder="请选择" default-value="0">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="IP地址:">
                  <a-input placeholder="192.168.1.1-192.168.1.254" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="资产组:">
                  <a-select mode="multiple" placeholder="请选择"></a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="状态:">
                  <a-select mode="multiple" placeholder="请选择"></a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="操作系统:">
                  <a-select mode="multiple" placeholder="请选择"></a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="更新时间:">
                  <a-range-picker @change="onDateChange" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="所属部门 :">
                  <a-select mode="multiple" placeholder="请选择"></a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="负责人 :">
                  <a-select mode="multiple" placeholder="请选择"></a-select>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="(!advanced && 8) || 24" :sm="24">
              <span
                class="table-page-search-submitButtons"
                :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
              >
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (this.queryParam = {})">重置</a-button>

                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
          <a-row>
            <a-button type="primary" style="margin-left: 8px">查看详情</a-button>
            <a-button type="primary" style="margin-left: 8px">设置补丁组</a-button>
            <a-button type="primary" style="margin-left: 8px">发布</a-button>
            <a-button type="primary" style="margin-left: 8px">设置黑名单</a-button>
            <a-button type="primary" style="margin-left: 8px">删除</a-button>
          </a-row>
        </a-form>
      </div>
      <a-row>
        <a-table
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="columns"
          :data-source="data"
        >
          <template slot="opt">
            <a-button type="primary" shape="circle" icon="search" />
            <a-button type="primary" shape="circle" icon="edit" @click="showEdit" />
          </template>
          <a-form slot="expandedRowRender" slot-scope="record" style="margin: 0" layout="inline">
            <a-row>
              <a-col :span="8">
                <a-form-item label="上次更新时间:">
                  {{ record.lastupdatetime }}
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="操作系统版本:">
                  {{ record.systemversion }}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-item label="ip地址:">
                  {{ record.ip }}
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="所属部门:">
                  {{ record.assetdep }}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <a-form-item label="MAC地址:">
                  {{ record.mac }}
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="负责人:">
                  {{ record.admin }}
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-table>
      </a-row>
      <a-row>
        <span>共搜索到{{ records }}条</span>
      </a-row>
    </a-card>

    <a-drawer
      title="详细搜索内容"
      :visible="visible"
      :width="300"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
    </a-drawer>
  </page-header-wrapper>
</template>

<script>
const columns = [
  { title: '资产ID', dataIndex: 'assetid', key: 'assetid' },
  { title: '资产名称', dataIndex: 'assetname', key: 'assetname' },
  { title: '资产所属部门', dataIndex: 'assetdep', key: 'assetdep' },
  { title: 'IP地址', dataIndex: 'ip', key: 'ip' },
  { title: '安全等级', dataIndex: 'securitylv', key: 'securitylv' },
  { title: '未打补丁数', dataIndex: 'notpatchnum', key: 'notpatchnum' },
  { title: '资产所有人', dataIndex: 'owner', key: 'owner' },
  { title: '更新时间', dataIndex: 'updatetime', key: 'updatetime' },
  { title: '操作', dataIndex: 'opt', key: 'opt', scopedSlots: { customRender: 'opt' } },
]

const data = [
  {
    assetid: 'web-20201124',
    assetname: '下载服务器',
    assetdep: '信息中心',
    ip: '192.168.1.24',
    securitylv: '74',
    notpatchnum: '10',
    owner: '李小',
    updatetime: '-',
    lastupdatetime: '2016-09-21 08:25:00',
    systemversion: 'linux  centos   3.3.24',
    mac: '33-A2-3C-68-MF-38-98',
    admin: '王刚',
  },
  {
    assetid: 'web-20201124',
    assetname: '下载服务器',
    assetdep: '信息中心',
    ip: '192.168.1.24',
    securitylv: '74',
    notpatchnum: '10',
    owner: '李小',
    updatetime: '-',
  },
  {
    assetid: 'web-20201124',
    assetname: '下载服务器',
    assetdep: '信息中心',
    ip: '192.168.1.24',
    securitylv: '74',
    notpatchnum: '10',
    owner: '李小',
    updatetime: '-',
  },
]
export default {
  name: 'PatchRepo',
  data() {
    return {
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      visible: false,
      form: this.$form.createForm(this),
      records: 922,
      data,
      columns,
      selectedRowKeys: [],
    }
  },
  methods: {
    showDrawer() {
      this.visible = true
    },
    onClose() {
      this.visible = false
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
  },
}
</script>

<style scoped>
</style>
